<template>
  <div class="sub-category" v-if="detailData.details">
    <el-breadcrumb class="breadcrumb" :separator-icon="ArrowRight" v-if="detailData.categories">
      <el-breadcrumb-item class="breadcrumb-item" :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item
        class="breadcrumb-item"
        :to="{ path: `/category/${detailData.categories[1].id}` }"
      >
        {{ detailData.categories[1].name }}</el-breadcrumb-item
      >

      <el-breadcrumb-item
        class="breadcrumb-item"
        :to="{ path: `/category/sub/${detailData.categories[0].id}` }"
      >
        {{ detailData.categories[0].name }}
      </el-breadcrumb-item>
      <el-breadcrumb-item class="breadcrumb-item">{{ detailData.name }}</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="container" v-if="detailData">
      <div class="left">
        <div class="left-top">
          <div class="left-img" ref="nowImgRef">
            <img :src="nowImg" alt="" />

            <!-- 滑块 -->
            <div
              class="slider"
              ref="sliderRef"
              :style="{ left: `${left}px`, top: `${top}px` }"
            ></div>
          </div>
          <div class="right-img">
            <img
              :class="{ active: nowImg === img }"
              v-for="img in detailData.mainPictures"
              :src="img"
              alt=""
              @click="changeImg(img)"
            />
          </div>

          <!-- 预览图放大图 -->
          <div
            class="op-img"
            :style="{
              backgroundImage: `url(${nowImg})`,
              backgroundPositionX: `${opX}px`,
              backgroundPositionY: `${opY}px`,
            }"
          ></div>
        </div>

        <div class="left-bottom">
          <div class="item">
            <p class="title">销量人气</p>
            <p class="num">{{ detailData.salesCount || '无' }}</p>
            <p class="desc">销量人气</p>
          </div>
          <div class="item">
            <p class="title">商品评价</p>
            <p class="num">{{ detailData.commentCount || '无' }}</p>
            <p class="desc">销量人气</p>
          </div>
          <div class="item">
            <p class="title">收藏人气</p>
            <p class="num">{{ detailData.collectCount || '无' }}</p>
            <p class="desc">收藏人气</p>
          </div>
          <div class="item">
            <p class="title">品牌信息</p>
            <p class="num">{{ detailData.brand?.name || '无' }}</p>
            <p class="desc">品牌信息</p>
          </div>
        </div>
      </div>

      <div class="right">
        <h3>{{ detailData.name }}</h3>
        <p class="desc">
          {{ detailData.desc }}
        </p>
        <div class="price">
          <span class="now">¥{{ detailData.price }}</span>
          <span class="old">¥{{ detailData.oldPrice }}</span>
        </div>
        <table>
          <tbody>
            <tr>
              <td>促销</td>
              <td>全场第二件8折</td>
            </tr>
            <tr>
              <td>服务</td>
              <td>7天无理由退货&赠送运费险</td>
            </tr>

            <SKU :detailData="detailData" />

            <tr>
              <td>数量</td>
              <td>
                <el-input-number
                  :disabled="numDisable"
                  v-model="queryParams.num"
                  :min="1"
                  :max="10"
                />
              </td>
              <td>
                <el-button type="primary" @click="addCart">加入购物车</el-button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="detail">
      <div class="left">
        <h3>商品详情</h3>
        <div class="table">
          <div class="table-list" v-for="item in detailData.details.properties" :key="item.value">
            <table>
              <tr>
                <td>{{ item.name }}</td>
                <td>{{ item.value }}</td>
              </tr>
            </table>
          </div>
        </div>
        <div class="img-list">
          <img v-for="item in detailData.details.pictures" :key="item" :src="item" alt="" />
        </div>
      </div>

      <div class="right">
        <!-- 24H -->
        <DetailHot title="24小时热榜" :type="1" :limit="5" />
        <!-- 周 -->
        <DetailHot title="周榜" :type="2" :limit="5" />
      </div>
    </div>
  </div>
</template>

<script setup name="ComponentName">
import { onMounted, reactive, ref, watch } from 'vue'
import { useMouseInElement } from '@vueuse/core'
import { ArrowRight } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
import { getDetailAPI } from '@/api/detail'
import { emitter } from '@/utils/emitter'
import { useCartStore } from '@/stores/cartStore.js'

const route = useRoute()
const detailData = ref({})
const getGoodsDetail = async (id = route.params.id) => {
  const res = await getDetailAPI(id)
  detailData.value = res.result
  nowImg.value = detailData.value.mainPictures[0]
}
onMounted(() => getGoodsDetail())

const queryParams = reactive({
  color: '',
  size: '',
  num: 1,
})

const nowImg = ref('')
const changeImg = (img) => {
  nowImg.value = img
}

watch(
  () => route.params.id,
  (newVal, oldVal) => {
    getGoodsDetail(newVal)
  },
)

// 获取鼠标在img大图的位置
const nowImgRef = ref(null)

const left = ref(0)
const top = ref(0)
const opX = ref(0)
const opY = ref(0)
const { elementX, elementY, isOutside } = useMouseInElement(nowImgRef)
watch([elementX, elementY, isOutside], () => {
  if (isOutside.value) return

  const offsetWidth = nowImgRef.value.offsetWidth
  const offsetHeight = nowImgRef.value.offsetHeight
  // 有效范围
  // 横向
  if (elementX.value > 50 && elementX.value < offsetWidth) {
    left.value = elementX.value - 50
  }
  // 纵向
  if (elementY.value > 50 && elementY.value < offsetHeight) {
    top.value = elementY.value - 50
  }
  // 边界
  if (elementX.value > offsetWidth - 50) {
    left.value = offsetWidth - 100
  }
  if (elementX.value < 50) {
    left.value = 0
  }
  if (elementY.value > offsetHeight - 50) {
    top.value = offsetHeight - 100
  }
  if (elementY.value < 50) {
    top.value = 0
  }

  // 大图
  opX.value = -left.value * 2
  opY.value = -top.value * 2
})

const numDisable = ref(true)
const skuData = ref({})

emitter.on('sku-parmes', (data) => {
  numDisable.value = false
  skuData.value = data
})
// 添加购物车
const cartStore = useCartStore()
const addCart = () => {
  if (numDisable.value === true) {
    ElMessage({
      message: '请选择规格',
      type: 'warning',
    })
    return
  }

  // 添加数据
  const data = {
    id: detailData.value.id,
    name: detailData.value.name,
    price: detailData.value.price,

    num: queryParams.num,
    color: skuData.value.color,
    size: skuData.value.size,
    skuId: skuData.value.skuId,
    picture: skuData.value.picture,
    selected: true,
  }

  // 没有添加过  直接push
  const cartList = cartStore.getCartList

  const item = cartList.find((item) => item.skuId === skuData.value.skuId)

  if (!item) {
    cartStore.addCart(data)
  } else {
    item.num += queryParams.num
  }
}
</script>

<style scoped lang="scss">
.breadcrumb {
  padding: 20px 100px;
  .breadcrumb-item {
    font-size: 16px;
    color: #333;
  }
}
.active {
  border: 2px solid #24a704;
}

.container {
  width: 88%;
  background: #fff;
  margin: 0px auto;
  padding: 20px 50px;
  display: flex;
  flex-flow: row nowrap;
  gap: 50px;
  height: 500px;

  .left {
    width: 30%;
    .left-top {
      width: 100%;
      height: 70%;
      position: relative;
      display: flex;
      flex-flow: row nowrap;
      gap: 20px;
      .left-img {
        width: 80%;
        height: 100%;
        position: relative;
        img {
          width: 100%;
          height: 100%;
        }

        &.left-img:hover ~ .op-img,
        &.left-img:hover .slider {
          visibility: visible;
        }

        .slider {
          position: absolute;
          visibility: hidden;
          width: 100px;
          height: 100px;
          background: rgba(0, 0, 0, 0.5);
          cursor: pointer;
        }
      }

      .op-img {
        position: absolute;
        top: 0;
        left: 84%;
        z-index: 2;
        width: 80%;
        height: 100%;
        visibility: hidden;
        overflow: hidden;
        background: no-repeat;
      }
      .right-img {
        width: 15%;
        height: 100%;
        display: flex;
        flex-flow: column nowrap;
        gap: 10px;
        img {
          width: 100%;
          height: calc(20% - (10px * 4 / 5));
        }
      }
    }
    .left-bottom {
      width: 100%;
      height: 30%;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
      margin-top: 25px;
      .item {
        width: 25%;
        height: 100%;
        p {
          text-align: center;
          &.title {
            font-size: 14px;
            color: #333;
          }
          &.num {
            font-size: 16px;
            color: #ff0000;
            padding: 7px 0;
          }
          &.desc {
            font-weight: bold;
          }
        }
      }
    }
  }

  .right {
    width: 60%;
    display: flex;
    flex-flow: column nowrap;
    gap: 20px;
    padding: 20px;
    h3 {
      font-size: 20px;
      color: #333;
    }
    .desc {
      font-size: 16px;
      color: #333;
    }
    .price {
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;
      gap: 10px;
      .now {
        font-size: 24px;
        color: #e80909;
      }
      .old {
        font-size: 16px;
        color: #565555;
        text-decoration: line-through;
      }
    }
    table tbody {
      display: flex;
      flex-flow: column;
      gap: 20px;

      td:nth-child(1) {
        width: 50px;
      }
    }
  }
}

.detail {
  width: 88%;
  margin: 20px auto;

  display: flex;
  .left {
    padding: 0px 50px;
    width: 85%;
    background: #fff;
    h3 {
      padding: 20px 0;
    }
    .table {
      display: flex;
      flex-flow: row wrap;
      width: 100%;
      .table-list {
        width: 50%;
        table {
          width: 100%;
          tr {
            padding: 5px 0;

            & td:nth-child(1) {
              color: #333;
              width: 150px;
            }
          }
        }
      }
    }
    .img-list {
      width: 100%;
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      margin-top: 20px;
    }
  }
  .right {
    width: 15%;
    background: #fff;
    margin-left: 10px;
  }
}
</style>
